<template>
	<view>
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="container">
			<view class="background-color" :style="'background:' + mobile_head_color">
				<view class="topbox">
					<view class="phone">{{listData.village_name}}</view>
					<view class="address-box1">
						<view class="address-icon">
							<image src="../../../static/images/address.png" class="address-img"></image>
						</view>
						<view class="address-text">{{listData.village_address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box" style="height: 100%;">
			<view class="left-box" :class="'village_'+ active1">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="text" :class="num == index?'textbox':''" v-for="(item,index) in village_list" @tap="selectSingle(index,item.single_id)">{{item.single_name}}</view>
				</scroll-view>
			</view>
			<view class="center-box" :class="'apartment_'+ active2">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;" @scroll="scroll">
					<view class="text" :class="num1 == index?'textbox':''" v-for="(item,index) in apartment_list" @tap="selectApartment(index,item.floor_id)">{{item.floor_name}}</view>
				</scroll-view>
			</view>
			<view class="right-box" :class="'room_'+active3">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;" @scroll="scroll2">
					<view class="text" :class="num2 == index?'textbox':''" v-for="(item,index) in room_list" @tap="selectRoom(index,item.room_id)">{{item.room_info}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;

	//获取社区列表
	const getApartment = () => {
		common.post('HouseApi&a=village_unit_list', {
			village_id: _this.village_id,
			single_id: _this.single_id,
		}, data => {
			console.log('++++', data)

			if (data.unit_list.length > 0) {
				_this.apartment_list = data.unit_list
				_this.active1 = 0;
				_this.active2 = 2;
				_this.active3 = 0;
				_this.num1 = -1
			} else {
				uni.showModal({
					title: '提示',
					content: '该楼栋下没有单元，请联系物业添加或选择其他单元',
					showCancel: false
				})
				_this.active1 = 1;
				_this.active2 = 0;
				_this.active3 = 0;
			}
		});
	};
	const getroom = () => {
		common.post('HouseApi&a=empty_village_room_list', {
			village_id: _this.village_id,
			floor_id: _this.floor_id,
		}, data => {
			console.log('++++', data)
			if (data.vacancy_list.length > 0) {
				_this.room_list = data.vacancy_list
				_this.active1 = 0;
				_this.active2 = 1;
				_this.active3 = 1;
				_this.num2 = -1;
			} else {
				uni.showModal({
					title: '提示',
					content: '该单元下没有房屋，请联系物业添加或选择其他房屋',
					showCancel: false
				})
				_this.active1 = 0;
				_this.active2 = 2;
				_this.active3 = 0;
			}

		});
	};








	// 获取楼栋列表
	const getStoriedBuilding = () => {
		console.log('获取社区列表')
		var now_page = _this.pageIndex;
		if (_this.longitude == '' || _this.latitude == '') {
			console.log('获取社区列表111')
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
				},
				fail: function(res) {
					console.log('定位失败：', res);
					village_info();
				}
			});
		} else {
			console.log('获取社区列表222')
			village_info();
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	};

	const village_info = () => {
		var keyword = _this.notedata;
		console.log("搜索输入的结果", keyword)
		common.post(
			'HouseApi&a=village_single_list', {
				village_id: _this.village_id,
			},
			data => {
				if (!keyword) {
					console.log('HouseApi&a=village_list哈哈哈哈哈', data, _this);
					if (data.single_list.length > 0) {
						_this.active1 = 1;
						_this.active2 = 0;
						_this.active3 = 0;
						_this.no_data = false;
						if (_this.pageIndex == 1) {
							_this.listData = data;
							_this.village_list = data.single_list;
						} else {
							_this.village_list = _this.village_list.concat(data.single_list);
						}
						console.log('village_list', _this.village_list);
					} else {
						uni.showModal({
							title: '提示',
							content: '该小区下没有楼栋，请联系物业添加或选择其他小区',
							showCancel: false,
							confirmText: common.changeTxt('确定'),
							success: function(res) {
								if (res.confirm) {
									if (common.checkIsFooterPage("/pages/village_menu/index")) {
										wx.switchTab({
											url: "/pages/village_menu/index"
										});
									} else {
										wx.redirectTo({
											url: '/pages/village_menu/index',
										})
									}
								}
							}
						})
						_this.active1 = 1;
						_this.active2 = 0;
						_this.active3 = 0;
					}

					_this.listData = data;
					console.log('HouseApi&a=village_listeeeeeeeeeeeeeee', data);
					if (_this.pageIndex < data.totalPage) {
						console.log('CCCCCCCCCCCCCCCCCCCCCCCC', data);
						_this.pageIndex = _this.pageIndex + 1;
						_this.pageLoading = true;
						_this.pageLoadings = false;
						_this.pageComplete = false;
					} else {
						console.log('HouseApi&a=village_list222222222222222222222', data);
						_this.pageLoading = false;
						_this.pageLoadings = true;
						_this.pageComplete = false;
					}
				} else {
					if (data.village_list) {
						if (_this.pageIndex == 1) {
							_this.listData = data;
							_this.village_list = data.single_list;
						} else {
							_this.village_list = _this.village_list.concat(data.single_list);
						}
						console.log('village_list', _this.village_list);
						_this.pageLoadings = false;
						_this.pageComplete = false;
					} else {
						_this.village_list = {}
						_this.pageLoading = false;
						_this.pageLoadings = false;
						_this.pageComplete = true;
					}
					console.log('HouseApi&a=village_listeeeeeeeeeeeeeee', data);
					if (_this.pageIndex < data.totalPage) {
						console.log('CCCCCCCCCCCCCCCCCCCCCCCC', data);
						_this.pageIndex = _this.pageIndex + 1;
						_this.pageLoading = false;
					} else {
						console.log('HouseApi&a=village_list222222222222222222222', data);
						_this.pageLoadings = false;
					}
				}
				if (data.referer_url) {
					_this.referer_url = data.referer_url;
				}
			}
		);
	};

	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				listData: {},
				village_list: [],
				apartment_list: [],
				room_list: [],
				listhouseData: {},
				user_options: {},
				villageid: '',
				villagename: '',
				villagelogo: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollY: true,
				pageIndex: 1,
				pageLoading: false,
				pageLoadings: false,
				reachBottom: false,
				pageComplete: false,
				notedata: '',
				mobile_head_color: '#06c1ae',
				property_id: 0,
				referer_url: '',
				referer_type: '',
				village_address: '',
				no_data: false,
				widthtab: false,
				widthtab1: false,
				widthtab2: false,
				num: -1,
				num1: -1,
				num2: -1,
				single_id: '',
				floor_id: '',
				active1: 0,
				active2: 0,
				active3: 0,
			};
		},
		// 上拉加载
		onReachBottom() {
			var _this = this;
			if (_this.pageLoading) {
				console.log('获取小区列表1')
				getvillageList();
				_this.pageLoading = false
			}
		},
		onPullDownRefresh() {
			_this.pageIndex = 1
			console.log('获取小区列表2')
			getvillageList()
		},
		onLoad: function(options) {
			_this = this;
			_this.village_id = options.village_id;
			console.log('options', options);
			if (options && options.property_id) {
				_this.property_id = options.property_id;
			}
			if (options && options.referer_type) {
				_this.referer_type = options.referer_type;
			}
			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color;

				if (!app.globalData.is_login) {
					if (config.config.is_demo_domain) {
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('为了方便您测试 社区O2O 更多功能，建议您先进行登录。我们然后为您默认绑定一个测试小区。'),
							showCancel: true,
							cancelText: common.changeTxt('先看看'),
							confirmText: common.changeTxt('去登录'),
							success: function(res) {
								if (res.confirm) {
									_this.user_options = {
										toLogin: true
									};
								} else if (res.cancel) {
									console.log('++++++');
									console.log('获取小区列表3')
									getStoriedBuilding()
								}
							}
						});
					} else {
						console.log('获取小区列表4')
						getStoriedBuilding();
					}
				} else {
					console.log('======');
					console.log('获取小区列表5')
					getStoriedBuilding();
				}
			});

			common.getTxtKey('选择单元').then(
				key => {
					uni.setNavigationBarTitle({
						title: key
					});
				},
				() => {}
			);
		},
		mounted() {

		},
		methods: {
			selectSingle(index, single_id) {
				_this.num = index;
				_this.single_id = single_id;
				getApartment();
				_this.scrollTop = _this.old.scrollTop
				_this.$nextTick(function() {
					_this.scrollTop = 0
				});
			},
			selectApartment(index, floor_id) {
				_this.num1 = index;
				_this.floor_id = floor_id;
				getroom()
				_this.scrollTop = _this.old.scrollTop
				_this.$nextTick(function() {
					_this.scrollTop = 0
				});
			},
			selectRoom(index, room_id) {
				uni.navigateTo({
					url: '/pages/village/my/joinHouse?pigcms_id=' + room_id
				})
			},
			scroll: function(e) {
				_this.old.scrollTop = e.detail.scrollTop
				
			},
			scroll2: function(e) {
				_this.old.scrollTop = e.detail.scrollTop
				
			},
			goTop: function(e) {
				
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			getLocation_msg(res) {
				if (res && res.lng) {
					_this.longitude = res.lng;
				}
				if (res && res.lat) {
					_this.latitude = res.lat;
				}
				console.log('反馈信息：', res);
				village_info();
			},
			getUserInfo(e) {
				console.log('user.info 1111111111', e);
				//if (e.userInfo) {
				console.log('获取小区列表6')
				_this.user_options = {}
				getvillageList();
				//}
			},
			goVillageIndex() {
				if (common.checkIsFooterPage("/pages/village_menu/index")) {
					wx.switchTab({
						url: "/pages/village_menu/index"
					});
				} else {
					wx.redirectTo({
						url: '/pages/village_menu/index'
					})
				}
			},
			// 选择小区
			goVillage(floor_id) {
				_this = this;

				uni.navigateTo({
					url: '/pages/village/my/myRoom?floor_id=' + floor_id
				})

			},
			//选择房间号
			goVillagehouse(e) {
				var pigcms_id = e.currentTarget.dataset.pigcms_id;
				var res = {
					village_id: _this.villageid,
					village_name: _this.villagename,
					village_logo: _this.villagelogo,
					pigcms_id: pigcms_id,
					property_id: _this.property_id
				};
				uni.setStorageSync('village_key', res);
				if (_this.referer_url) {
					var referer_url = _this.referer_url + '&village_id=' + _this.villageid + '&pigcms_id=' + pigcms_id;
					common.parseUrl(referer_url, '', false, '');
				} else {
					_this.goVillageIndex();
				}
			},
			search() {
				_this.pageIndex = 1
				console.log('获取小区列表7')
				getvillageList();
				_this.pageLoading = false;
				_this.pageLoadings = false;
			},
		},
		components: {
			uniPopup
		}
	};
</script>

<style>
	.village_0 {
		width: 100%;
	}

	page {
		background: #ffffff;
	}

	.container {
		margin: 0;
		padding: 0;
		background: #ffffff;
	}

	.topbox {
		padding: 0 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-size: 30%;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}

	.phone {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.address-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 10rpx;
	}

	.address-icon {
		width: 20rpx;
		height: 24rpx;
		flex-shrink: 0;
		margin-top: 9rpx;
	}

	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #ffffff;
		margin-left: 15rpx;
	}

	.container-box {
		display: flex;
		flex-direction: row;
	}

	.left-box {
		width: 30%;
		height: calc(100vh - 130rpx);
		/*border-left: 2rpx solid #CCCCCC;*/
	}

	.center-box {
		width: 30%;
		height: calc(100vh - 130rpx);
		border-left: 2rpx solid #F1F1F1;
	}

	.right-box {
		width: 40%;
		height: calc(100vh - 130rpx);
		border-left: 2rpx solid #F1F1F1;
	}

	.text {
		font-size: 28rpx;
		line-height: 90rpx;
		margin-left: 15rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.textbox {
		color: #F8C717;
	}

	.village_0 {
		width: 30%;
	}

	.village_1 {
		width: 100%;
	}

	.apartment_0 {
		width: 0%;
		display: none;
	}

	.apartment_1 {
		width: 30%;
	}

	.apartment_2 {
		width: 70%;
	}

	.room_0 {
		width: 0%;
		display: none;
	}

	.room_1 {
		width: 40%;
	}

	.activeText {
		width: 100%;
	}

	.activeText1 {
		width: 0%;
	}

	.activeText2 {
		width: 0%;
	}
</style>
